<html>
<head>
    <title>Map View</title>
    <link rel="stylesheet" href="styles/common.css" type="text/css" />
    <link rel="stylesheet" href="styles/thumbnail.css" type="text/css" />
    <link rel="stylesheet" href="styles/attribution.css" type="text/css" />
    <style>
        #the-map {
            position:   absolute;
            left:       0px;
            width:      100%;
        }
        .item-lens-container {
            padding:        1em;
            width:          30em;
            border:         1px solid #ccc;
            height:         18em;
            overflow:       hidden;
        }
    </style>
    <script src="http://static.simile.mit.edu/ajax/api-2.0/simile-ajax-api.js"></script>
    <script src="scripts/externals/json2.js"></script>
    
    <script src="scripts/common.js"></script>
    <script src="scripts/util/queue.js"></script>
    <script src="scripts/util/render.js"></script>
    <script src="scripts/util/url.js"></script>
    <script src="scripts/util/color-coder.js"></script>
    <script src="scripts/data/path-util.js"></script>
    <script src="scripts/views/map-view/map-view-markers.js"></script>
    <script src="scripts/views/map-view/map-view-plotting.js"></script>
    <script src="scripts/views/map-view/map-view-querying.js"></script>
    <script>
        var keys = {
            "http://mqlx.com/~david/parallax/":
                "ABQIAAAA5JLLfCE9c7HAtg25QM2KCRTybkRvmvJmmY2jEIjRP5SA6vMolhQSYAaJ2sMVVgF2vj09l_VwCefftw",
            "http://mqlx.com/~david/parallax-staging/":
                "ABQIAAAA5JLLfCE9c7HAtg25QM2KCRQo1yEfLpCpxhzlEXIU-9s8ddOl3hR54gH6LsXMf1reF1g0Ojb3EfUdgw"
        };
        
        var key = "";
        for (var n in keys) {
            if (document.location.href.indexOf(n) == 0) {
                key = keys[n];
                break;
            }
        }
        includeJavascriptFile("http://maps.google.com/maps?file=api&v=2&key=" + key);
    </script>
    <script>
        var log = (window.console) ? function(s) { window.console.log(s); } : /*window.alert*/ function() {};
        function genericErrorHandler(s) {
            log(s);
        }
        
        function onLoad() {
            SimileAjax.WindowManager.initialize();
            
            resizeMap();
            createMap();
            window.onresize = function() {
                window.setTimeout(resizeMap, 1000);
            };

            try {
                var url = document.location.href;
                var q = url.indexOf("?");
                var s = url.substr(q + 1);
                
                var job = JSON.parse(decodeURIComponent(s));
                job.colorCoder = new DefaultColorCoder();
                job.colorKeys = {};
                
                mapViewQuery(job, function(points) {
                    internalAddPoints(points, job.hasSize, job.hasImage, popupRenderer, onFocus);
                });
            } catch (e) {
                alert(e);
            }
        }
        
        function showLightboxForThumbnail(evt) {
            // not sure what to do
        }
        
        function resizeMap() {
            var div = document.getElementById("the-map");
            if (SimileAjax.Platform.browser.isIE) {
                div.style.top = "50px";
                div.style.height = (document.body.offsetHeight - 55) + "px";
            } else {
                div.style.top = "55px";
                div.style.bottom = "0px";
            }
        }
        
        function popupRenderer(elmt, itemID, itemName) {
            var c = SimileAjax.DOM.getPageCoordinates(elmt);
            var x = c.left + Math.floor(elmt.offsetWidth / 2);
            var y = c.top + Math.floor(elmt.offsetHeight / 2);

            var div = document.createElement("div");
            div.innerHTML = '<div class="item-lens-container"></div>';
            
            renderItem(
                itemID, 
                div, 
                function() { 
                    SimileAjax.WindowManager.cancelPopups();
                    SimileAjax.Graphics.createBubbleForContentAndPoint(div, x, y, 400);
                },
                onFocus
            );
        };
        
        function onFocus(itemID, itemName) {
            window.open(ParallaxConfig.corpusBaseUrl + "view" + itemID, "_blank");
        }
    </script>
</head>
<body onload="onLoad()">
    <div class="freebase-attribution">
        <img class="freebase-attribution-logo" src="http://www.freebase.com/api/trans/raw/freebase/attribution" />
        <div>
            Source: <a href="http://www.freebase.com" title="Freebase &ndash; The World's Database">Freebase</a> &ndash; The World's Database <br/> 
            Freely licensed under <a href="http://www.freebase.com/view/common/license/cc_attribution_25">CC-BY</a>.
        </div>
    </div> 
    <div id="the-map"></div>
</body>
</html>